
// mixin
@mixin button-line-variant($color, $background, $border) {
    color: $text-color;
    background-color: transparent; 
    border-color: $border;

    &:hover,
    &:focus,
    &:active,
    &.active {
        color: $color;
        background-color: $background;
    }
    .open & {
        &.dropdown-toggle {
            color: $color;
            background-color: $background;
        }
    }
}

@mixin button-icon-variant($size) {
    height: $size;
    width: $size;
    line-height: $size;    
}

.btn-dark {
    @include button-variant($btn-dark-color, $btn-dark-bg, $btn-dark-border);
}

.btn-line-default {
    @include button-line-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-line-primary {
    @include button-line-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.btn-line-success {
    @include button-line-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
.btn-line-info {
    @include button-line-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
.btn-line-warning {
    @include button-line-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
.btn-line-danger {
    @include button-line-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}


//
.btn-w-sm { min-width: 100px; }
.btn-w-md { min-width: 120px; }
.btn-w-lg { min-width: 150px; }

// 
.btn-round { border-radius: 30px; }
.btn-gap { margin: 5px; }
.btn-gap-h { margin: 0 5px; }
.btn-gap-v { margin: 0 0 5px; }

// 
.btn-icon-round {
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    &:hover {
        color: $reverse;
    }
}
.btn-icon-round-sm {
    @include button-icon-variant(30px);
}
.btn-icon-round-md {
    @include button-icon-variant(45px);
}


// social buttons
.btn-twitter-round {
    display: inline-block;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    line-height: 35px;
    text-align: center;
    color: $reverse;
    background-color: #00c7f7;
    border-color: #00c7f7;
    &:hover {
        color: $reverse;
        background-color: #00a6ce;
        border-color: #0096ba;        
    }
}
.btn-facebook-round {
    display: inline-block;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    line-height: 35px;
    text-align: center;
    vertical-align: middle;
    color: $reverse;
    background-color: #335397;
    border-color: #335397;
    &:hover {
        color: $reverse;
        background-color: #294279;
        border-color: #243a69;     
    }  
}
.btn-google-plus-round {
    display: inline-block;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    line-height: 35px;
    text-align: center;
    vertical-align: middle;
    color: $reverse;
    background-color: #dd4a38;
    border-color: #dd4a38;  
    &:hover {
        color: $reverse;
        background-color: #ca3522;
        border-color: #b8301f;
    }    
}


.btn-twitter {
    color: $reverse;
    background-color: #00c7f7;
    border-color: #00c7f7;

    i { margin-right: 10px; }

    &:hover {
        color: $reverse;
        background-color: #00a6ce;
        border-color: #0096ba;        
    }
}

.btn-facebook {
    color: $reverse;
    background-color: #335397;
    border-color: #335397;

    i { margin-right: 10px; }
    
    &:hover {
        color: $reverse;
        background-color: #294279;
        border-color: #243a69;      
    }
}

.btn-gplus {
    color: $reverse;
    background-color: #dd4a38;
    border-color: #dd4a38;  
        
    i { margin-right: 10px; }

    &:hover {
        color: $reverse;
        background-color: #ca3522;
        border-color: #b8301f;
    }
}